<!--天气统计-->
<script setup>
import * as echarts from "echarts"
import {ref, onMounted, watch} from "vue";
const props=defineProps({
  weatherStatistics:{
    type:Array,
    default:()=>[]
  }
})
//英文转中文
function getDay(name){
  switch(name){
    case 'Sunny':
      return '晴天';
    case 'Cloudy':
      return '多云';
    case 'Showers':
      return '雨天';
  }
}
const weatherStatistics=ref()
let ROOT_PATH = 'https://echarts.apache.org/examples';
const weatherIcons = {
  Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
  Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
  Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
};
const seriesLabel = {
  show: true
};
const option=ref({
    title: {
      text: '天气统计',
      textStyle: {
        fontSize:22,
        fontWeight: 'bold',
      },
      top:'2.5%',
      left:'2%'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['北京', '上海', '深圳'],
      textStyle: {
        fontSize:16,
      },
      top:'3%'
    },
    grid: {
      left: 100,
      bottom:'8%'
    },
    toolbox: {
      show: false,
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'value',
      name: '天',
      axisLabel: {
        formatter: '{value}'
      }
    },
    yAxis: {
      type: 'category',
      inverse: true,
      data: ['Sunny', 'Cloudy', 'Showers'],
      axisLabel: {
        formatter: function (value) {
          return   '{' + value + '| }\n{value|' + getDay(value)+'}';
        },

        margin: 20,
        rich: {
          value: {
            lineHeight: 30,
            align: 'center'
          },
          Sunny: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: weatherIcons.Sunny
            }
          },
          Cloudy: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: weatherIcons.Cloudy
            }
          },
          Showers: {
            height: 40,
            align: 'center',
            backgroundColor: {
              image: weatherIcons.Showers
            }
          }
        }
      }
    },
    series: [
      {
        name: '北京',
        type: 'bar',
        data:[],
        // data: [165, 170, 30],
        label: seriesLabel,
        markPoint: {
          symbolSize: 1,
          symbolOffset: [0, '50%'],
          label: {
            formatter: '{a|{a}\n}{b|{b} }{c|{c}}',
            backgroundColor: 'rgb(242,242,242)',
            borderColor: '#aaa',
            borderWidth: 1,
            borderRadius: 4,
            padding: [4, 10],
            lineHeight: 26,
            position: 'right',
            distance: 20,
            rich: {
              a: {
                align: 'center',
                color: '#fff',
                fontSize: 18,
                textShadowBlur: 2,
                textShadowColor: '#000',
                textShadowOffsetX: 0,
                textShadowOffsetY: 1,
                textBorderColor: '#333',
                textBorderWidth: 2
              },
              b: {
                color: '#333'
              },
              c: {
                color: '#ff8811',
                textBorderColor: '#000',
                textBorderWidth: 1,
                fontSize: 22
              }
            }
          },
        }
      },
      {
        name: '上海',
        type: 'bar',
        label: seriesLabel,
        // data: [150, 105, 110]
        data:[]

      },
      {
        name: '深圳',
        type: 'bar',
        label: seriesLabel,
        // data: [220, 82, 63]
        data:[]
      }
    ]
})
onMounted(()=>{
  let myChart = echarts.init(weatherStatistics.value, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });
  watch(props,()=>{
    //所有城市名称
    option.value.legend.data=props.weatherStatistics.cities.map(item=>item.name)
    for(const i in props.weatherStatistics.cities){
      //单个城市名
      option.value.series[i].name=props.weatherStatistics.cities[i].name
      //天气数据
      option.value.series[i].data=props.weatherStatistics.cities[i].weatherStatistics.map(item=>item.day)
    }
    myChart.setOption(option.value);

  })



  if (option && typeof option === 'object') {
    myChart.setOption(option.value);
  }

  window.addEventListener('resize', myChart.resize);
})
</script>

<template>
  <div class="weather-left2" id="weather-left2" ref="weatherStatistics"></div>
</template>

<style scoped>

</style>